<template>
  <div o-Container>
    <div class="big_box">
      <!-- 面包屑 -->
      <div class="crumbs" v-if="crumbs && crumbs.path">
        <span @click="goBack">{{ crumbs.name }}</span>/<span>权益详情</span>
      </div>
      <div class="content_box">
        <div class="putaway_box" v-if="
          routeMsg.rightsType == 'ZY' ||
          (routeMsg.rightsType == 'LB' && routeMsg.type == 'ZH')
        ">
          <div :style="{
            backgroundColor:
              goodsList.Status == 8 || goodsList.Status == 7
                ? '#2E3037'
                : '#F78C53'
          }" class="putaway_list" @click="onPutawayWeb()" v-if="routeMsg.rightsType != 'LB'">
            {{
              goodsList.Status == 8 || goodsList.Status == 7
                ? "权益平台下架"
                : "权益平台上架"
            }}
          </div>
          <div :style="{
            backgroundColor:
              goodsList.Status == 8 || goodsList.Status == 6
                ? '#2E3037'
                : '#F78C53'
          }" class="putaway_list" @click="onPutawayApplet()">
            {{
              goodsList.Status == 8 || goodsList.Status == 6
                ? "小程序下架"
                : "小程序上架"
            }}
          </div>
        </div>
        <div class="top_box">
          <!-- 图片swiper -->
          <div class="scroll-wrapper">
            <div class="img_list_box" id="scrollContainer" ref="scrollContainer">
              <div class="img_list" :class="{ active: index == current }" v-for="(item, index) in SecondaryPicturePath"
                :key="item.name" @click="changeImg(item, index)">
                <img :src="item.url" alt="" />
              </div>
            </div>
            <div class="carousel-wrapper">
              <!-- <img :src="imgPath" alt=""> -->
              <el-carousel height="32rem" ref="carousel" indicator-position="outside" :initial-index="current"
                @setActiveItem="setActiveItem" :autoplay="false" @change="changeCurrent">
                <el-carousel-item v-for="item in SecondaryPicturePath" :key="item.name">
                  <img :src="item.url" alt="" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div class="right_text_box">
            <div class="title">
              <div>
                <span class="mast_go" v-if="goodsList.TypeID == 2">权益包</span>
                {{ goodsList.Name }}<div class="no-Quantity" v-if="goodsList.InventoryQuantity == 0">已售罄</div>
              </div>
              <div class="collect" v-if="routeMsg.rightsType == 'SC'">
                <img v-if="collectionsStatus == 1" @click="ChangeCollectionsStatus(1)"
                  src="/static/skin/default/MMS/AIGC/EquityRepositories/BenefitsDetails/img/xingxing_1.png" alt="" />
                <img v-if="collectionsStatus == 0" @click="ChangeCollectionsStatus(2)"
                  src="/static/skin/default/MMS/AIGC/EquityRepositories/BenefitsDetails/img/xingxing.png" alt="" />
                收藏
              </div>
            </div>
            <div class="compny">
              <span class="compny-tag-span" v-for="item in StTArr(goodsList.FlagListName)" :key="item">{{ item }}</span>
            </div>
            <div class="type">
              <span class="sale-price">￥<span class="price-text">{{
                goodsList.CostPrice
              }}</span></span>
              <span class="cost-price">￥{{ goodsList.SalePrice }}</span>
            </div>
            <div class="type">
              已售数量：<span style="margin-right: 3.2rem;">{{ goodsList.SoldQuantity }}份</span>
              <span class="starting">起售数量：<span>{{ goodsList.MinimumQuantity }} 份</span></span>
              库存数量：<span>{{ goodsList.InventoryQuantity }}份</span>
            </div>
            <div class="term" v-if="goodsList.TypeID != 2">
              使用地址：<span>{{ goodsList.Address }}</span>
            </div>
            <div class="type flex">
              <!-- <div class="term_right" v-if="goodsList.TypeID != 2">
                权益类型：<span>{{ goodsList.FlagListName }}</span>
              </div> -->
              <div v-if="goodsList.IsRefund > 0">
                权益保障：
                <span v-if="goodsList.IsRefund == 1"
                  style="border: 1px solid #000;font-size: 1.2rem;padding: .2rem 1rem;">可退款</span>
                <!-- <span v-if="goodsList.IsRefund == 2"
                  style="border: 1px solid #000;font-size: 1.2rem;padding: .2rem 1rem;">可部分退款</span> -->
              </div>
            </div>
            <div class="term compny">
              使用期限：
              <span class="compny-span">{{ goodsList.EffectiveTime | dateFormat }} -
                {{ goodsList.ExpireTime | dateFormat }}</span>
            </div>
            <div class="compny">
              采购公司限制：
              <span class="astrict-company" v-for="item in StTArr(goodsList.TransferRuleIDName)" :key="item">{{ item
                }}</span>
            </div>
            <!-- <div class="price"
              v-if="routeMsg.rightsType == 'SC' || routeMsg.rightsType == 'YG' || routeMsg.rightsType == 'LB'">
              <div>市场价格：
                <span style="color: #A5A5A5;text-decoration: line-through;">￥{{ goodsList.SalePrice }}</span>
              </div>
              <div>平台价格：
                <span>￥{{ goodsList.CostPrice }}</span>
              </div>
            </div> -->
            <div class="button" v-if="
              goodsList.InventoryQuantity > 0 && goodsList.InventoryQuantity >= goodsList.MinimumQuantity &&
              routeMsg.rightsType == 'SC' &&
              goodsList.CompanyID != octopus.passport.authorization.company
            ">
              <button @click="BatchRelease()">购买</button>
            </div>
          </div>
        </div>
        <!-- 包含权益 -->
        <ReferralBenefits v-if="goodsList.TypeID == 2" :containRights="containRights"></ReferralBenefits>
        <!-- 权益服务费 -->
        <ServiceCharge v-if="routeMsg.rightsType == 'LB' && containRights.length > 0" :list="containRights">
        </ServiceCharge>

        <!-- 权益详情内容 -->
        <Introduce @openDrawer="refundDrawer" @onRefundzh="onRefundzh" :Description="goodsList.Description"
          :rightsType="routeMsg.rightsType" :IsRefund="goodsList.IsRefund"
          :UseRuleDescription="goodsList.UseRuleDescription"></Introduce>
        <!-- 购买 -->
        <BatchRelease ref="BatchRelease" :list="goodsList" @goodsList="fatherMethod"></BatchRelease>
        <BatchReleasezh ref="BatchReleasezh" DialogTitle="退款权益" @goodsList="getPayListzh"></BatchReleasezh>
        <!-- 支付 -->
        <!-- :goodsList="goodsList" -->
        <PayDialog DialogTitle="订单支付" ref="PayDialog" :goodsList="goodsList" :num="num" @close="closeBuyDrawer">
        </PayDialog>
        <!-- 退款 -->
        <refundDrawer ref="creationDialog"></refundDrawer>
      </div>
      <div class="combination-wrapper">
        <!-- 推荐权益 -->
        <Combination></Combination>
      </div>
    </div>
  </div>
</template>
<script>
// serviceCharge.
import ReferralBenefits from "../BenefitsDetailsComponents/referralBenefits.vue";
import Combination from "../BenefitsDetailsComponents/combination.vue";
import Introduce from "../BenefitsDetailsComponents/introduce.vue";
import ServiceCharge from "../BenefitsDetailsComponents/serviceCharge.vue";
import BatchRelease from "../Components/buyDrawer.vue";
import BatchReleasezh from "../Components/bulkBuying.vue";
import PayDialog from "../Components/payDialog.vue";
import refundDrawer from "../MyRightsComponents/refundDrawer.vue";
export default {
  // props: {
  //   isShow: {
  //     type: Boolean,
  //     default: true,
  //   },
  // },
  components: {
    Combination,
    ReferralBenefits,
    Introduce,
    ServiceCharge,
    BatchRelease,
    BatchReleasezh,
    PayDialog,
    refundDrawer
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      imgList: [],
      imgPath: "",
      title: "购买",
      goodsList: {},
      containRights: [],
      // 路由返回的参数
      routeMsg: {},
      // 副图
      SecondaryPicturePath: [],
      isShow: true,
      putawayWeb: false,
      putawayApplet: false,
      // 退款状态
      refundStatus: 0,
      // 是否显示上架按钮
      showButton: true,
      // 判断是多个权益还是单权益
      isPlural: 1,
      // 是否显示退款按钮
      refundButton: true,
      // 价格方式
      priceShow: 1,
      // 是否收藏
      collectionsStatus: 0,
      // 购买数量
      num: 1,
      // 权益ID
      InventoryID: null,
      crumbs: null,
      current: 0,
      scrollTop: 0,
      CompanyID: ""
    };
  },
  watch: {
    "$route.query.rightsId": {
      immediate: true,
      handler(e, a) {
        this.routeMsg = this.octopus.vue.$route.query;
        if (this.routeMsg.reload) {
          this.distributeEvent(this.routeMsg);
        }
        // this.ZYGoodsMsg(e)
        this.fetchApi(e);
      }
    },
    current: {
      handler(val) {
        this.scrollTop = val * 90 - 10;
        console.log(this.scrollTop, "监听current变化");
        // this.$refs.scrollContainer.scrollTop = this.scrollTop
        $("#scrollContainer").animate(
          { scrollTop: this.scrollTop + "rem" },
          500
        );
      }
    }
  },
  activated() {
    // ZY自有权益
    this.routeMsg = this.octopus.vue.$route.query;

    this.distributeEvent(this.routeMsg);
  },
  mounted(e) { },
  filters: {
    dateFormat(value) {
      if (!value) return "";
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + "年" + month + "月" + day + "日";
    }
  },
  computed: {},
  methods: {
    // 分发权益接口
    distributeEvent(item) {
      if (item.rightsType == "ZY") {
        if (item.type == "DG") {
          this.ZYGoodsMsg(item.rightsId, 1357, item.CompanyID);
          this.CompanyID = item.CompanyID;
        }
        if (item.type == "ZH") {
          this.ZYGoodsMsg(item.rightsId, 1358, item.CompanyID);
          this.CompanyID = item.CompanyID;
        }
      } else if (item.rightsType == "YG") {
        if (item.type == "DG") {
          this.ZYGoodsMsg(
            item.rightsId,
            1343,
            this.octopus.passport.authorization.company
          );
          this.CompanyID = this.octopus.passport.authorization.company;
        }
        if (item.type == "ZH") {
          this.ZYGoodsMsg(item.rightsId, 1358, item.CompanyID);
          this.CompanyID = item.CompanyID;
        }
      } else if (item.rightsType == "SC") {
        if (item.type == "DG") {
          this.ZYGoodsMsg(
            item.rightsId,
            778,
            this.octopus.passport.authorization.company
          );
          this.CompanyID = this.octopus.passport.authorization.company;
        }
        if (item.type == "ZH") {
          this.ZYGoodsMsg(item.rightsId, 1358, item.CompanyID);
          this.CompanyID = item.CompanyID;
        }
      } else if (item.rightsType == "LB") {
        this.ZYGoodsMsg(item.rightsId, 1358, item.CompanyID);
        this.CompanyID = item.CompanyID;
      }
    },
    // 自有权益
    ZYGoodsMsg(rightsId, id, CompanyID) {
      let this_ = this;
      this.is_flag = false;
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: id,
          cellData: [
            { name: "Address" }, // 使用地址
            { name: "CompanyID" }, // 权益所属公司
            { name: "ContractID" }, // 采购公司限制
            { name: "CostPrice" }, // 平台价格
            { name: "CreateTime" }, // 创建时间
            { name: "CreateUserID" }, // 创建用户
            { name: "Description" }, // 权益内容
            { name: "EffectiveTime" }, // 生效日期
            { name: "EquityServiceRate" }, // 权益服务费
            { name: "ExpireTime" }, // 过期时间
            { name: "FlagList" }, // 权益标签
            { name: "FlagListName" }, // 权益标签中文
            { name: "ID" }, // ID
            { name: "Integral" }, // 让利积分
            { name: "InventoryQuantity" }, // 库存数量
            { name: "IsOpenSale" }, // 是否允许在其他国企平台售卖(1.允许,0.不允许)
            { name: "IsRefund" }, // 是否允许退款
            { name: "MainPicturePath" }, // 主图
            { name: "MinimumQuantity" }, // 起售数量
            { name: "Name" }, // 权益名称/标题
            { name: "PlatformServiceRate" }, // 平台服务费
            { name: "ProductFlagList" }, // 产品标签
            { name: "ProductFlagListName" }, // 产品标签
            { name: "SalePrice" }, // 市场价格
            { name: "SecondaryPicturePath" }, // 副图
            { name: "SoldQuantity" }, // 已售数量
            { name: "Status" }, // 权益状态
            { name: "StatusName" }, // 权益状态
            { name: "TransferRuleID" }, // 采购公司限制
            { name: "TransferRuleIDName" }, // 采购公司限制 中文
            { name: "TypeID" }, // 权益类型
            { name: "UpdateTime" }, // 修改时间
            { name: "UseRuleDescription" }, // 使用规则描述
            { name: "VerifiedQuantity" }, // 权益已核销数量
            { name: "IsCollection" }, // 是否收藏
            { name: "CollectionID" }, // 收藏ID
            { name: "InventoryID" } //库存ID
          ],
          paramData: {
            ID: rightsId,
            UserID: this.octopus.passport.id,
            CompanyID: CompanyID
          }
        },
        data => {
          if (data.status.code == 200) {
            this_.InventoryID = data.content.queryData[0]
              ? data.content.queryData[0].InventoryID
              : null;
            this_.goodsList = data.content.queryData[0] || {};
            this_.collectionsStatus = data.content.queryData[0]
              ? data.content.queryData[0].IsCollection
              : 0;
            // 主副图合并
            this_.SecondaryPicturePath = [
              ...JSON.parse(this_.goodsList.MainPicturePath || "[]"),
              ...JSON.parse(this_.goodsList.SecondaryPicturePath || "[]")
            ];
            this_.imgPath = this_.SecondaryPicturePath[0]
              ? this_.SecondaryPicturePath[0].url
              : "";
            if (this_.goodsList.TypeID == 2) {
              this_.fetchApi(data.content.queryData[0].ID).then(res => {
                this_.containRights = res;
              });
            }

            if (this.$route.query.click) {
              this.$nextTick(() => {
                this.$refs.BatchRelease.drawerOp();
              });
            }
          } else {
            this_.octopus.tips.error(data);
          }
        }
      );
    },
    // // 组合权益查询递归
    // async recursiveFunc(arr, results = []){
    //   for (let i = 0; i < arr.length; i++) {
    //     const item = arr[i];
    //     if (item.TypeID === 2) {
    //       // 如果TypeID等于2，调用请求接口
    //       const data = await this.fetchApi(item.ID);
    //       // 递归处理返回的数据
    //       await recursiveFunc(data, results);
    //     } else if (item.TypeID === 1) {
    //       // 如果TypeID等于1，将该对象添加到结果数组中
    //       results.push(item);
    //     }
    //   }
    //   // 返回结果数组
    //   return results;
    // },
    fetchApi(id) {
      return new Promise((resolve, reject) => {
        this.octopus.request.api.post(
          "/Octopus/Engine/List",
          {
            id: 1184,
            cellData: [
              { name: "CostPrice" }, // 平台价格
              { name: "FlagList" }, // 权益标签
              { name: "FlagListName" }, // 权益标签
              { name: "ID" }, // ID
              { name: "InventoryQuantity" }, // 库存数量
              { name: "MainPicturePath" }, // 主图
              { name: "Name" }, // 权益标题
              { name: "SalePrice" }, // 市场价格
              { name: "SoldQuantity" }, // 已售数量
              { name: "TypeID" }, // 权益类型
              { name: "EquityCount" }, // EquityCount
              { name: "EquityServiceRate" }, // 小程序服务费
              { name: "PlatformServiceRate" } // 平台服务费
            ],
            paramData: {
              ID: id
            }
          },
          function (data) {
            if (data.status.code == 200) {
              resolve(data.content.queryData);
            } else {
              o.octopus.tips.error(data);
            }
          }
        );
      });
    },
    onPutawayWeb() {
      if ( this.goodsList.InventoryQuantity == 0) {
        this.$message({
          type: "error",
          message: "库存为0，不能上架,请先去补库存再上架。"
        });
        return
      }
      this.$confirm(
        `是否${this.goodsList.Status == 8 || this.goodsList.Status == 7
          ? "下架"
          : "上架"
        }权益平台`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          // type: 'warning'
          center: true
        }
      ).then(() => {
        let Status;
        switch (this.goodsList.Status) {
          case 5:
            Status = 7;
            break;
          case 6:
            Status = 8;
            break;
          case 7:
            Status = 5;
            break;
          case 8:
            Status = 6;
            break;
        }
        this.rightsType(Status);
      });
    },
    onPutawayApplet() {
      if (this.goodsList.InventoryQuantity == 0) {
        this.$message({
          type: "error",
          message: "库存为0，不能上架,请先去补库存再上架。"
        });
        return
      }
      this.$confirm(
        `是否${this.goodsList.Status == 8 || this.goodsList.Status == 6
          ? "下架"
          : "上架"
        }小程序平台`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          // type: 'warning'
          center: true
        }
      ).then(() => {
        let Status;
        switch (this.goodsList.Status) {
          case 5:
            Status = 6;
            break;
          case 6:
            Status = 5;
            break;
          case 7:
            Status = 8;
            break;
          case 8:
            Status = 7;
            break;
        }
        this.rightsType(Status);
      });
    },
    rightsType(Status) {
      let this_ = this;
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          type: "UPDATE",
          id: 748,
          cellData: [
            { name: "Status", defaultValue: Status } // 权益状态（保存未提交（草稿箱）、已提交/待审核、审核通过、审核未通过、未启用，启用、已售完、到期）
          ],
          value: this_.routeMsg.rightsId
        },
        data => {
          if (data.status.code == 200) {
            let id = "";
            if (this_.routeMsg.rightsType == "ZY") {
              id = 1357;
            }
            if (this_.routeMsg.rightsType == "YG") {
              id = 1343;
            }
            if (this_.routeMsg.rightsType == "SC") {
              id = 778;
            }
            if (this_.routeMsg.rightsType == "LB") {
              id = 1358;
            }
            this_.ZYGoodsMsg(this_.routeMsg.rightsId, id, this_.CompanyID);

            this_.$message({
              type: "success",
              message: "操作成功!"
            });
            // 添加审核历史
            this_.createVerify(Status);
            this_.api_ClearRedisCache(this_.routeMsg.rightsId);
          } else {
            this_.octopus.tips.error(data);
          }
        }
      );
    },
    // 上下架 释放redis 缓存
    api_ClearRedisCache(id) {
      this.octopus.tools.openAPI(`/ESB/AIGC/ClearRedisCache/${id}`, datas => {
        if (datas.content.status == 200) { }
      });
    },
    StTArr(value) {
      if (value) {
        return value.split(",");
      } else {
        return [];
      }
    },
    refundDrawer(type) {
      this.$refs.creationDialog.drawerOp(type);
    },
    onRefundzh() {
      this.$refs.BatchReleasezh.drawerOp();
    },
    changeImg(item, index) {
      this.current = index;
      this.setActiveItem(this.current);
    },
    BatchRelease() {
      this.$refs.BatchRelease.drawerOp();
      // 购买接口联调
    },
    getPayList(list) {
      this.goodsList = list;
    },
    getPayListzh() { },
    fatherMethod(num) {
      this.num = num;
      setTimeout(() => {
        this.$refs.PayDialog.drawerOp();
      }, 0);
    },
    ChangeCollectionsStatus(e) {
      let o = this;
      if (this.collectionsStatus == 0) {
        this.collectionsStatus = 1;
        o.octopus.request.api.post(
          "/Octopus/Engine/Item",
          {
            id: 1185,
            type: "CREATE",
            cellData: [
              { name: "Count", defaultValue: 1 }, // 浏览次数
              {
                name: "CreateTime",
                defaultValue:
                  new Date().toJSON().substring(0, 10) +
                  " " +
                  new Date().toTimeString().substring(0, 8)
              }, // CreateTime
              // { name: "CreateUserID", defaultValue: this.octopus.passport.id },	// CreateUserID
              { name: "EquityID", defaultValue: this.routeMsg.rightsId }, // EquityID
              { name: "ID" }, // ID
              { name: "CreateUserID", defaultValue: this.octopus.passport.id },
              { name: "InventoryID", defaultValue: this.InventoryID }
            ]
          },
          function (data) {
            if (data.status.code == 200) {
              o.$message({
                message: "已收藏",
                type: "success"
              });
            } else {
              o.octopus.tips.error(data);
            }
          }
        );
      } else {
        this.collectionsStatus = 0;
        o.octopus.request.api.post(
          "/Octopus/Engine/Item",
          {
            id: 1185,
            type: "DELETE",
            value: o.goodsList.CollectionID,
            cellData: [
              { name: "ID", defaultValue: o.goodsList.CollectionID } // ID
            ]
          },
          function (data) {
            if (data.status.code == 200) {
              this.$message("已取消收藏");
            } else {
              o.octopus.tips.error(data);
            }
          }
        );
      }
    },
    closeBuyDrawer() {
      this.$refs.BatchRelease.drawer = false;
      this.$refs.BatchReleasezh.drawer = false;

      if (this.goodsList.InventoryQuantity - 1 < this.MinimumQuantity) {
        // 获取用户组
        this.$utils.getGroupInfo(o, '超级管理员,高级管理员,业务管理员', this.goodsList.CompanyID).then((res) => {
          console.log('发送消息的用户组：', res);
          // 发送消息 传值说明 模版ID ，消息类型 ，消息里的字段 ，创建用户ID，接收公司ID，接收群组ID
          res.length > 0 && o.$utils.sendMessageMulti(13, 6, { EquityName: this.goodsList.Name }, this.octopus.passport.id, this.goodsList.CompanyID, res, this);
        });
      }

    },

    createVerify(Status) {
      let Opinions = "",
        status = null;
      if (
        (this.goodsList.Status == 5 && Status == 6) ||
        (this.goodsList.Status == 7 && Status == 8)
      ) {
        Opinions = "小程序上架";
        status = 6;
      }
      if (
        (this.goodsList.Status == 6 && Status == 5) ||
        (this.goodsList.Status == 8 && Status == 7)
      ) {
        Opinions = "小程序下架";
        status = 16;
      }
      if (
        (this.goodsList.Status == 5 && Status == 7) ||
        (this.goodsList.Status == 6 && Status == 8)
      ) {
        Opinions = "平台上架";
        status = 7;
      }
      if (
        (this.goodsList.Status == 7 && Status == 5) ||
        (this.goodsList.Status == 8 && Status == 6)
      ) {
        Opinions = "平台下架";
        status = 17;
      }
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1196,
          type: "CREATE",
          cellData: [
            {
              name: "CreateTime",
              defaultValue:
                new Date().toJSON().substring(0, 10) +
                " " +
                new Date().toTimeString().substring(0, 8)
            }, // 时间
            { name: "CreateUserID", defaultValue: this.octopus.passport.id }, // 创建人
            { name: "EquityID", defaultValue: this.goodsList.ID }, // 权益ID
            { name: "Opinions", defaultValue: Opinions }, // 审核内容
            { name: "Status", defaultValue: status } // 审核状态
          ]
        },
        function (data) {
          if (data.status.code == 200) {
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },
    // 面包屑跳转
    goBack() {
      this.octopus.router.jump(this.crumbs.path);
    },

    // 切换current
    changeCurrent(val) {
      this.current = val;
    },
    setActiveItem(index) {
      this.$refs.carousel.setActiveItem(index);
    }
  },
  beforeRouteEnter(to, from, next) {
    // 在路由进入前，可以访问来源路由（from）
    const route = [
      {
        path: "/MMS/AIGC/ShoppingCentre/List",
        name: "权益商城"
      },
      {
        path: "/MMS/AIGC/MyRights/OwnRights/List",
        name: "自有权益"
      },
      {
        path: "/MMS/AIGC/MyRights/Purchased/List",
        name: "已购权益"
      },
      {
        path: "/MMS/AIGC/CreationCenter/PortfolioRights/List",
        name: "权益列表"
      },
      {
        path: "/MMS/AIGC/Collections/List",
        name: "收藏库"
      },
      {
        path: "/MCS/AIGC/PO/SalesOrder/List",
        name: "全部订单"
      }
    ];
    const data = route.find(item => item.path == from.path);
    next(vm => {
      vm.crumbs = data;
    });
  },
  beforeDestroy() {
    this.drawer = false;
    this.$refs.BatchRelease.handleClose();
  }
};
</script>
<style scoped>
@import "../../../../../static/skin/default/MMS/AIGC/EquityRepositories/BenefitsDetails/css/base.css";

.combination-wrapper {
  width: 29.5rem;
  height: inherit;
  position: fixed;
  right: 0;
  z-index: 99;
  margin-right: 1.6rem;
}

.big_box {
  width: calc(100% - 7px);
  display: flex;
  /* position: relative; */
  height: inherit !important;
}

.big_box::-webkit-scrollbar {
  display: none;
}

.crumbs {
  position: absolute;
  color: #adadad;
  font-size: 12px;
  margin: -2rem 0 2rem 0;
  white-space: nowrap;
}

.crumbs span {
  margin: 0 4px;
  cursor: pointer;
}

.crumbs span:last-child {
  cursor: not-allowed;
}

.putaway_box {
  display: flex;
  align-items: center;
}

.putaway_list {
  width: 12rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 1rem;
  margin: 0 2rem 2rem 0;
}

.refundState {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: normal;
  padding: 0.7rem;
  background-color: #fbecec;
  color: #ff0000;
  border-radius: 1rem;
  border: 0.1rem solid;
  margin-left: 2rem;
}

.content_box .top_box .right_text_box .title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right_text_box .type span.starting {
  color: #f87338;
  margin-right: 9rem;
}

.right_text_box .type span.starting>span {
  color: #f87338;
}

.content_box .top_box .right_text_box .title .collect {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 400;
  color: #f87338;
}

.content_box .top_box .right_text_box .title .collect img {
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
}

.right_text_box .type .sale-price {
  font-size: 1.25rem;
  color: #f87338;
  font-weight: bold;
}

.right_text_box .type .sale-price .price-text {
  font-size: 2.75rem;
  color: #f87338;
  font-weight: bold;
}

.right_text_box .type .cost-price {
  font-size: 1.25rem;
  color: #1e1b19;
  font-weight: 400;
  text-decoration-line: line-through;
  opacity: 0.4;
}

.right_text_box .type.flex {
  display: flex;
  align-items: center;
}

.right_text_box .type.flex .term {
  margin-left: 12rem;
}

.right_text_box .type.flex .term_right {
  margin-right: 12rem;
}

>>>.el-input__inner:not(.is-disabled):hover {
  border-color: #f78c53;
}

>>>.el-input-number__decrease:hover,
>>>.el-input-number__increase:hover {
  color: #f78c53;
}

>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),
>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
  border-color: #f78c53;
}

.right_text_box .compny span.compny-span {
  background-color: rgba(95, 138, 250, 0.1);
  color: rgba(95, 138, 250, 1);
}

.right_text_box .compny span.compny-tag-span {
  background-color: #fff;
  border: 1px solid #336df1;
  color: #336df1;
}

.right_text_box .compny span.astrict-company {
  background-color: rgba(248, 115, 56, 0.1);
  color: #ff8347;
}

.crumbs {
  display: flex;
}

.content_box {
  width: calc(100% - 32rem);
  margin: 1.5rem 3.8rem 0 0;
}

.content_box .top_box .scroll-wrapper {
  display: flex;
}

.content_box .top_box .scroll-wrapper .img_list_box {
  width: 7rem;
  height: 32rem;
  margin: 0 2rem 0 0;
  overflow-x: hidden;
  overflow-y: scroll;
  flex-grow: 0;
  flex-shrink: 0;
  transition: all 0.3s;
}

.content_box .top_box .scroll-wrapper .img_list_box::-webkit-scrollbar {
  display: none;
  width: 0;
}

.content_box .top_box .scroll-wrapper .img_list_box .img_list {
  width: 7rem;
  height: 7rem;
  margin: 0 0 1rem 0;
  border-radius: 1rem;
  overflow: hidden;
  box-sizing: border-box;
}

.content_box .top_box .scroll-wrapper .img_list_box .img_list.active {
  border: 3px solid #ff8347;
}

.content_box .top_box .scroll-wrapper .img_list_box .img_list img {
  width: 100%;
  height: 100%;
}

.carousel-wrapper {
  width: 32rem;
  height: 32rem;
  border-radius: 1rem;
  overflow: hidden;
  margin-right: 2rem;
  flex-grow: 0;
  flex-shrink: 0;
}

>>>.carousel-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-Quantity {
  font-size: 1rem;
  color: #fff;
  background: #c4a888;
  border-radius: 10px;
  padding: 5px 10px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
</style>
